// 提供一个能购显示xtx-message组件
// 这个函数将来直接导入直接使用，也能挂载到vue实例
// import {message} from 'Message.js

import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)

// 定时器标识
let timer = null
export default ({ type, message }) => {
  // 渲染组件
  // 1.导入消息提示组件
  // 将导入的消息提示组件编译为虚拟节点
  // createNode创建虚拟节点(组件,属性对象}(props))
  const vnode = createVNode(XtxMessage, { type, message })
  // 2.真被一个装载消息提示的容器

  // 3.将虚拟节点渲染在容器中
  // render(虚拟节点,DOM容器)
  render(vnode, div)

  //   3秒后销毁组件
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
